<template>
  <Promised :promise="getAuthsAsync">
    <template v-slot:pending>
      <CardSkeleton
        title="功能权限"
        :rows="5"
      />
    </template>
    <template v-slot>
      <section>
        <a-modal
          wrap-class-name="modal-wrap-container"
          :title="authGroupModel.title"
          :visible="authGroupModel.visible"
          v-bind="modalProps"
          :confirm-loading="authGroupModel.confirmLoading"
          width="30%"
          @ok="modalSubmit(authGroupModel)"
          :keyboard="false"
          :closable="authGroupModel.closable"
        >
          <!-- @cancel="modalCancel(authGroupModel)" -->
          <AuthGroup :show-checkbox="showCheckbox" :actions="actions" :ref="authGroupModel.ref" v-model="selectedActions" />
          <template slot="footer">
            <a-button shape="round" type="primary" :loading="authGroupModel.confirmLoading" @click="modalSubmit(authGroupModel)">
              {{ showCheckbox ? 'Submit' : 'Cancel' }}
            </a-button>
          </template>
        </a-modal>

        <Card
          title="功能权限"
        >
          <!-- {{  actionscheckedKeys }} -->
          <!-- check-strictly -->
          <el-tree
            :data="auths"
            :default-checked-keys="checkedKeys"
            :props="treeProps"
            node-key="alias"
            @check="handlerChecked"
            show-checkbox
          >
            <div
              slot-scope="{node, data}"
              class="auth-node"
            >
              <span>
                {{ node.label }}
              </span>
              <span
                v-if="data.actions.length"
                class="action"
                @click.stop="handlerActions(data.actions)"
              >功能权限</span>
            </div>
          </el-tree>
          <!-- <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :replaceFields="{
              children:'children',
              title:'name',
              key:'alias',
              disabled: 'disable'
            }"
            :selected-keys="selectedKeys"
            :tree-data="auths"
            @expand="onExpand"
            @select="onSelect"
          >
             <div
              slot-scope="{node, data}"
              class="auth-node"
            >
              <span>
                {{ node.label }}
              </span>
              <span
                v-if="data.actions.length"
                class="action"
                @click="showAuthDialog(data, authList[1].name)"
              >功能权限</span>
            </div>
          </a-tree> -->
        </Card>
      </section>
    </template>

    <template #rejected="error">
      <div>
        {{ error }}
      </div>
    </template>
  </Promised>
</template>

<script>
import { getUserAuth } from '@/api/flow/user'
import { Card } from '@/components'
import props from '../props'
import AuthGroup from './modal/AuthGroup'
import modal from './modal'

export default {
  mixins: [props, modal],

  data () {
    return {
      // actions
      actions: [],
      selectedActions: [],

      expandedKeys: [],
      autoExpandParent: true,
      // 页面权限
      checkedKeys: [],
      // 功能权限
      actionscheckedKeys: [],
      selectedKeys: [],

      getAuthsAsync: null,
      // 权限
      auths: [],
    }
  },

  computed: {
    treeProps () {
      return {
        children: 'children',
        label: 'name',
        disabled: (data, node) => {
          if (!this.showCheckbox) return true
          return data.disable
        },
      }
    },
  },

  props: {
    // 可被选择
    showCheckbox: {
      type: Boolean,
      default: () => false,
    },
  },

  components: {
    Card,
    AuthGroup,
  },

  created () {
    this.getAuthsAsync = this.getAuths()
  },

  watch: {
    checkedKeys (val) {
      console.log('onCheck', val)
    },
  },

  methods: {
    // 权限提交
    handleSubmit () {
      // return new Promise((resolve, reject) => {
      //   const auth_alias = this.actionscheckedKeys.concat(this.checkedKeys);
      //   modifyGroupAuths(this.gid, { auth_alias })
      //     .then(data => {
      //       this.getAuthsAsync = this.getAuths();
      //       resolve(data);
      //     })
      //     .catch(error => {
      //       reject(error)
      //     })
      // })
    },

    // 触发action
    handlerActions (actions) {
      this.actions = actions

      // 工单权限绑定初始化
      this.actions.forEach((item) => {
        const index = this.actionscheckedKeys.indexOf(item.alias)

        if (index > -1) {
          this.actionscheckedKeys.splice(index, 1)

          this.selectedActions.push(item.alias)
        }
      })

      this.$nextTick(() => {
        this.authGroupModel.visible = true
      })
    },

    // 点击复选框触发
    handlerChecked (checked, { checkedKeys }, node) {
      this.checkedKeys = checkedKeys
    },

    // Array.from(new Set(arr))
    // 获取已选择权限
    getCheckedKeys (auths) {
      auths.forEach((item) => {
        if (item.use) {
          this.checkedKeys.push(item.alias)
        }

        if (item.actions.length) {
          this.getActionsCheckedKeys(item.actions)
        }

        // children
        if (item.children.length) this.getCheckedKeys(item.children)
      })
    },

    // 获取已选择功能权限
    getActionsCheckedKeys (actions) {
      actions.forEach((item) => {
        // actions
        if (item.use) {
          this.actionscheckedKeys.push(item.alias)
        }
      })
    },

    // 获取权限
     getAuths () {
      return new Promise((resolve, reject) => {
        getUserAuth(this.uid)
          .then(data => {
            this.auths = data

            this.getCheckedKeys(this.auths)
            console.log(data, 'dada')

            resolve(data)
          })
          .catch(error => {
            console.log(error, 'dada')
            reject(error)
          })
      })
    },

    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
  },
}
</script>

<style lang="scss">

.el-tree-node__content {
  margin-bottom: $margin-base;
}
</style>

<style lang="scss" scoped>

.auth-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .action {
    color: $theme-color;
  }
}
</style>
